<template>
    <div class="mine">
        <div class="userInfo">
            <img :src=" userInfo.avatar | getAvatar" alt="">
            <p>{{ userInfo.username }}</p>
            <div class="info">
                <div>
                    <span>文章数</span>
                    <span>{{ articleList.length }}</span>
                </div>
                <div>
                    <span>浏览量</span>
                    <span>{{ views }}</span>
                </div>    
            </div>
        </div>
        <div class="site-content">
            <section-title>
                <div class="mine-header">
                    <div class="title">个人信息</div>
                    <div class="apply" v-if="userInfo.permission === 2"><a href="#" @click="perConfirm = true">提高权限+</a></div>
                </div>
            </section-title>
            <!---说明--->
            <div class="statement">
                <quote>
                    <p>名称：{{ userInfo.username }}</p>
                    <p>邮箱：{{ userInfo.email }}</p>
                    <p>权限：{{ getPermission(userInfo.permission) }}</p>
                    <p class="userInfo-sm">文章数：{{ articleList.length }}</p>
                    <p class="userInfo-sm">浏览量：{{ views }}</p>
                </quote>
            </div>
            <!----->
            <hr/>
            <section-title v-if="userInfo.permission < 2">
                <div class="mine-header">
                    <div class="title">文章列表</div>
                </div>
            </section-title>
            <div class="articleList"  v-if="userInfo.permission < 2 || (userInfo.permission === 3 && articleList.length !== 0)">
                <quote>
                    <ul>
                        <li class="article-header">
                            <span>文章标题</span>
                            <span class="article-time">发布时间</span>
                        </li>
                        <li v-if="articleList.length === 0" style="text-align: center;color: #999">暂无文章</li>
                        <li v-for="item in articleList" :key="item.id" class="article-item">
                            <router-link :to="`/article/${item.id}`">{{item.title}}</router-link>
                            <span class="article-time">{{ item.pubTime | parseTime }}</span>
                        </li>
                    </ul>
                </quote>
            </div>
        </div>
        <div class="mask" v-show="perConfirm" @click="handleCanclePer">
            <div class="mask-content">
                <span>升级为超级会员可享受发布文章的能力，如需升级，请在24小时之内以markdown文件格式发送您的文章至站长邮箱，确定要升级吗？</span>
                <div class="mask-btn">
                    <button @click="perConfirm = false">下次一定</button>
                    <button class="del" @click="handleUp">我乃文圣</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import sectionTitle from '@/components/section-title'
    import Quote from "@/components/quote";
    import { mapState } from 'vuex'
    import {fetchUserList,fetchAddApply} from '../api'
    import permission from '@/const/permission';
    export default {
        name: "Mine",
        data(){
            return{
                articleList: [],
                views:0,
                perConfirm:false,
            }
        },
        components:{
            Quote,
            sectionTitle
        },
        computed:{
            ...mapState({
                userInfo: state => state.userInfo
            }),
        },
        methods: {
            getUserList(){
                fetchUserList(this.$store.state.userInfo.id).then(res => {
                    this.articleList = res
                    this.views = res.reduce((total,item) => total + item.viewsCount,0)
                })
            },
            getPermission(type){
                return permission[type]
            },
            handleCanclePer(e) {
                if (e.target.className === 'mask') {
                    this.perConfirm = false
                };
            },
            handleUp(){
                const {avatar,...other} = this.userInfo
                fetchAddApply(other).then(res=>{
                    this.perConfirm = false
                    this.$message.success('期待您的佳作')
                }).catch(err=>{
                    this.perConfirm = false
                    this.$message.warning('您已申请，请尽快发邮件，谢谢')
                })
            }
        },
        mounted() {
            this.getUserList()
        }
    }
</script>

<style scoped lang="less">
    .mine{
        padding-top: 40px;
        position: relative;
    }

    .userInfo{
        position: fixed;
        top: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
        border-radius: 3px;
        padding: 15px;
        width: 250px;
        transform: translateX(100px) translateY(150px);
        font-size: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        // height: 100px;
        img{
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: 20px;
        }

        p{
            margin-bottom: 20px;
        }


        .info{
            display: flex;
            justify-content: space-around;
            width: 100%;
            div{
                display: flex;
                flex-direction: column;
                align-items: center;
                span{
                    margin-bottom: 10px;
                }
            }
        }
    }

    .mine-header{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 80px;
        font-weight: 400;
        .title{
            font-size: 20px;
        }
        .apply:hover{
            color: #ff6d6d;
        }
    }
    .statement{
        margin: 60px 0 20px 0;
        a{
            color: #ff6d6d;
        }
        p{
            line-height: 2rem;
        }
    }
    hr{
        margin: 40px 0;
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 109, 109, 0.75), rgba(0, 0, 0, 0));
    }
    .articleList{
        margin: 60px 0 20px 0;
        li{
            padding-left: 20px;
            margin-bottom: 20px;
            list-style: disc;
            display: flex;
            justify-content: space-between;
        }
        .article-header{
            color: #5f0105;
            padding-bottom: 10px;
            
        }
        .article-item:hover{
            color: #ff6d6d;
        }
    }

    .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;

    .mask-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 200px;
        background: #fff;
        border-radius: 10px;
        padding: 20px;

        span{
            display: block;
            text-align: center;
            margin-top: 20px;
            line-height: 1.5;
        }

        .mask-btn {
            display: block;
            text-align: center;
            margin-top: 60px;
            
            button {
                padding: 5px 20px;
                border: 1px solid #1a1717;
                border-radius: 5px;
                color: #1a1717;
                margin: 0 10px;

            }

            .del{
                background-color: #ecb9b9;
            }

            button:hover {
                box-shadow: 0 0 5px #1a1717;
            }

            .del:hover {
                box-shadow: 0 0 5px #ee0505;
            }
        }
        
    }
}
    /*******/
    @media (min-width: 1490px) {
        .userInfo-sm {
            display: none;
        }
    }

    @media (max-width: 1490px) {
        .userInfo {
            display: none;
        }
    }


    @media (max-width: 800px) {
        .article-time{
            display: none;
        }
    }
</style>
